<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-user-search mb15">
				<el-input size="default" v-model="state.tableData.param.keyword" placeholder="请输入名称" style="max-width: 180px"></el-input>
				<el-button size="default" type="primary" class="ml10" @click="fetchData()">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="success" class="ml10" @click="onOpenAddOrEdit('add')">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增
				</el-button>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="name" label="分类名称" show-overflow-tooltip></el-table-column>
				<!-- <el-table-column prop="parentId" label="父分类ID (用于支持二级分类, 外键关联category.id)" show-overflow-tooltip></el-table-column> -->
				<el-table-column prop="iconUrl" label="分类图标链接" show-overflow-tooltip></el-table-column>
				<el-table-column prop="sortOrder" label="排序字段" show-overflow-tooltip></el-table-column>
				<el-table-column prop="isActive" label="是否启用" show-overflow-tooltip>
					<template #default="scope">
						<span v-if="scope.row.isActive">是</span>
						<span v-else>否</span>
					</template>
				</el-table-column>
				<el-table-column prop="createDate" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updateDate" label="更新时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="200">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenAddOrEdit('edit', scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				:current-page="state.tableData.param.current"
				background
				:page-size="state.tableData.param.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog :title="state.dialog.title" :visible.sync="state.dialog.isShowDialog" width="769px">
			<div>
				<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="分类名称">
								<el-input v-model="state.ruleForm.name" placeholder="分类名称" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<!-- <el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="父分类ID (用于支持二级分类, 外键关联category.id)">
								<el-input v-model="state.ruleForm.parentId" placeholder="父分类ID (用于支持二级分类, 外键关联category.id)" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row> -->
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="分类图标链接">
								<el-input v-model="state.ruleForm.iconUrl" placeholder="分类图标链接" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="排序字段">
								<el-input v-model="state.ruleForm.sortOrder" placeholder="排序字段" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="是否启用 (1-是, 0-否)">
								<el-input v-model="state.ruleForm.isActive" placeholder="是否启用 (1-是, 0-否)" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="创建时间">
								<el-input v-model="state.ruleForm.createDate" placeholder="创建时间" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="35">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="更新时间">
								<el-input v-model="state.ruleForm.updateDate" placeholder="更新时间" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<template>
					<span class="dialog-footer">
						<el-button @click="onCancel" size="default">取 消</el-button>
						<el-button type="primary" @click="onSubmit" :loading="state.submitBtn.loading" size="default">{{ state.dialog.submitTxt }}</el-button>
					</span>
				</template>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { useTbApi } from '@/api/tb/category';
import { Message, MessageBox } from 'element-ui';

export default {
	name: 'tb',
	data() {
		return {
			state: {
				tableData: {
					data: [],
					total: 0,
					loading: false,
					param: {
						current: 1,
						limit: 10,
						keyword: '',
					},
				},
				dialog: {
					isShowDialog: false,
					type: '',
					title: '',
					submitTxt: '',
				},
				ruleForm: {
					name: '', // 分类名称 (唯一)
					parentId: '', // 父分类ID (用于支持二级分类, 外键关联category.id)
					iconUrl: '', // 分类图标链接
					sortOrder: '', // 排序字段
					isActive: '', // 是否启用 (1-是, 0-否)
					createDate: '', // 创建时间
					updateDate: '', // 更新时间
				},
				submitBtn: {
					loading: false,
					type: '',
				},
			},
		};
	},
	methods: {
		fetchData() {
			this.state.ruleForm = {};
			this.state.tableData.loading = true;
			useTbApi()
				.list(this.state.tableData.param)
				.then((response) => {
					this.state.tableData.data = response.data.records;
					this.state.tableData.total = response.data.total;
					this.state.tableData.loading = false;
				});
		},
		onOpenAddOrEdit(type, row) {
			if (type === 'edit') {
				this.state.submitBtn.type = 'edit';
				this.state.ruleForm = row;
				this.state.dialog.title = '修改${column.columnComment}';
				this.state.dialog.submitTxt = '修 改';
			} else {
				this.state.submitBtn.type = 'add';
				this.state.ruleForm = {
					name: '', // 分类名称 (唯一)
					parentId: '', // 父分类ID (用于支持二级分类, 外键关联category.id)
					iconUrl: '', // 分类图标链接
					sortOrder: '', // 排序字段
					isActive: '', // 是否启用 (1-是, 0-否)
					createDate: '', // 创建时间
					updateDate: '', // 更新时间
				};
				this.state.dialog.title = '新增${column.columnComment}';
				this.state.dialog.submitTxt = '新 增';
			}
			this.state.dialog.isShowDialog = true;
		},
		onRowDel(row) {
			MessageBox.confirm(`此操作将永久删除，是否继续?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.deleteInfo(row);
				})
				.catch(() => {});
		},
		handleSizeChange(pageSize) {
			this.state.tableData.data = [];
			this.state.tableData.param.limit = pageSize;
			this.fetchData();
		},
		handleCurrentChange(current) {
			this.state.tableData.data = [];
			this.state.tableData.param.current = current;
			this.fetchData();
		},
		closeDialog() {
			this.state.dialog.isShowDialog = false;
		},
		onCancel() {
			this.closeDialog();
		},
		onSubmit() {
			this.state.submitBtn.loading = true;
			if (this.state.submitBtn.type === 'edit') {
				useTbApi()
					.update(this.state.ruleForm)
					.then((response) => {
						this.state.submitBtn.loading = false;
						this.closeDialog();
						this.fetchData();
					})
					.catch(() => {
						this.state.submitBtn.loading = false;
					});
			} else {
				useTbApi()
					.add(this.state.ruleForm)
					.then((response) => {
						this.state.submitBtn.loading = false;
						this.closeDialog();
						this.fetchData();
					})
					.catch(() => {
						this.state.submitBtn.loading = false;
					});
			}
		},
		deleteInfo(row) {
			useTbApi()
				.delete(row)
				.then((response) => {
					Message.success('删除成功');
					this.fetchData();
				})
				.catch(() => {
					this.fetchData();
				});
		},
	},
	computed: {},
	created() {},
	mounted() {
		this.fetchData();
	},
};
</script>

<style scoped></style>
